<template>
  <a-spin :spinning='loading'>
    <a-card>
      <section slot='title'>首页</section>
      <div class='list'>
        <div class='box mb-10'>
          <a-icon type='shopping' :style="{ fontSize: '40px', color: '#1684FC' }" />
          <div class='ml-20'>
            <div class='price'>
              <a-statistic :value='info.merchantTotalNum' :valueStyle="{ fontSize: '30px' }" />
            </div>
            <div class='mt-10'>商家数</div>
            <div class='mt-10'>今日新增：{{ info.merchantTodayNum ? info.merchantTodayNum : 0 }}</div>
          </div>
        </div>
        <div class='box mb-10'>
          <a-icon type='fork' :style="{ fontSize: '40px', color: '#FF8E38' }" />
          <div class='ml-20'>
            <div class='price'>
              <a-statistic :value='info.consultationTotalNum' :valueStyle="{ fontSize: '30px' }" />
            </div>
            <div class='mt-10'>问诊数</div>
            <div class='mt-10'>今日新增：{{ info.consultationTodayNum ? info.consultationTodayNum : 0 }}</div>
          </div>
        </div>
        <div class='box mb-10'>
          <a-icon type='user' :style="{ fontSize: '40px', color: '#04D1B0' }" />
          <div class='ml-20'>
            <div class='price'>
              <a-statistic :value='info.memberTotalNum' :valueStyle="{ fontSize: '30px' }" />
            </div>
            <div class='mt-10'>用户数</div>
            <div class='mt-10'>今日新增：{{ info.memberTodayNum ? info.memberTodayNum : 0 }}</div>
          </div>
        </div>
        <div class='box'>
          <a-icon type='account-book' :style="{ fontSize: '40px', color: '#BD3124' }" />
          <div class='ml-20'>
            <div class='price'>¥
              <a-statistic :value='info.translateTotalNum' :valueStyle="{ fontSize: '30px' }" />
            </div>
            <div class='mt-10'>总销售金额</div>
            <div class='mt-10'>今日新增：¥{{ info.translateTodayNum ? info.translateTodayNum : 0 }}</div>
          </div>
        </div>
        <div class='box'>
          <a-icon type='transaction' :style="{ fontSize: '40px', color: '#CBA43F' }" />
          <div class='ml-20'>
            <div class='price'>¥
              <a-statistic :value='info.translateTotalNum' :valueStyle="{ fontSize: '30px' }" />
            </div>
            <div class='mt-10'>总流水金额</div>
            <div class='mt-10'>今日新增：¥{{ info.translateTodayNum ? info.translateTodayNum : 0 }}</div>
          </div>
        </div>
        <div class='box'>
          <a-icon type='global' :style="{ fontSize: '40px', color: '#0F40F5' }" />
          <div class='ml-20'>
            <div class='price'>
              <a-statistic :value='info.reqTotalNum' :valueStyle="{ fontSize: '30px' }" />
            </div>
            <div class='mt-10'>总访问量</div>
            <div class='mt-10'>今日新增：{{ info.reqTodayNum ? info.reqTodayNum : 0 }}</div>
          </div>
        </div>
      </div>
      <div class='list mt-30'>
        <div class='echarts' style='width:70%'>
          <div class='list'>
            <div>收益趋势</div>
            <a-select default-value='近半月' style='width: 120px' @change='handleChange'>
              <a-select-option value='近半月'>
                近半月
              </a-select-option>
            </a-select>
          </div>
          <Charts :options='topDataOptions' height='400' />
        </div>
        <div class='echarts' style='width:29%'>
          <div class='list'>
            <div>访问量</div>
            <a-select default-value='近半月' style='width: 120px' @change='handleChange'>
              <a-select-option value='近半月'>
                近半月
              </a-select-option>
            </a-select>
          </div>
          <div class='data'>
            <div class='mr-20'>周: <span>880</span>次</div>
            <div>月: <span>766</span>次</div>
          </div>
          <Charts :options='orderOptions' height='400' />
        </div>
      </div>
    </a-card>
  </a-spin>
</template>
<script>
import Charts from '@/components/v-echarts'
import { orderCountTrend, adminsummary } from '@/api/index'

export default {
  data() {
    return {
      loading: false,
      beginTime: this.$utils.formatTimestamp(new Date().getTime()),
      endTime: this.$utils.formatTimestamp(new Date().getTime()),
      info: ''
    }
  },
  components: { Charts },
  computed: {
    orderOptions() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
      return option
    },
     topDataOptions() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },

        xAxis: [
          {
            type: 'category',
            data: ['06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',

            min: 0,
            max: 250,
            interval: 50

          },
          {
            type: 'value'


          }
        ],
        series: [

          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' ml'
              }
            },
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' °C'
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      }
      return option
    }
  },
  watch: {},
  async created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await adminsummary()
      this.info = res
    }
  }
}
</script>
<style lang='less' scoped>
.data {
  display: flex;

  span {
    font-size: 16px;

    color: #1684FC;
  }
}

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .echarts {
    width: 49%;
  }

  .box {
    width: 30%;
    box-shadow: 0 0 20px #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;

    .price {
      font-size: 30px;
      font-weight: bold;
      color: #000;
      display: flex;
      align-items: center;
    }
  }
}
</style>
